<template xmlns="">
  <div class="app-container">
    <el-container>
      <!--左边病历模板管理-->
      <el-aside style="background-color: white">
        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <div>
              <span style="font-size: 15px;">病例模板</span>
              <el-button
                type="text"
                size="mini"
                style="float: right;margin-top: 2px"
                @click="edit()">
                编辑目录
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="block">
              <el-tree
                :data="case_model_catalogList"
                default-expand-all
                node-key="id"
                ref="tree"
                :expand-on-click-node="false"
                @node-click="queryModel">
                  <span class="custom-tree-node" slot-scope="{ node, case_model_catalogList }">
                  <span>{{ node.label}}</span>
                  <span v-show="showSearch">
                    <el-button
                      v-if="node.data.typeId == 1"
                      type="text"
                      size="mini"
                      @click.stop="() => handleAdd(node)">
                      新增
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => handleDelete(node)">
                      删除
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-col>
        </el-row>
      </el-aside>
      <!--模板详情与评估诊断-->
      <el-main v-show="openModel">
        <div style="height: 350px">
          <div slot="footer" class="dialog-footer" style="height: 50px;margin-bottom: 30px">
            <el-button type="primary" @click="updateModel">保存修改</el-button>
          </div>
          <el-form ref="formModel" :model="formModel" :rules="rulesModel" style="white-space:nowrap;">
          <el-row>
            <el-col :span="11">
              <el-form-item label="模板名" prop="name" label-width="120px">
                <el-input v-model="formModel.name" placeholder="请输入模板名" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="主诉" prop="chiefComplaint" label-width="120px">
                <el-input v-model="formModel.chiefComplaint" placeholder="请输入主诉" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="现病史" prop="historyOfPresentIllness" label-width="120px">
                <el-input v-model="formModel.historyOfPresentIllness" placeholder="请输入现病史" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="现病治疗情况" prop="historyOfTreatment" label-width="120px">
                <el-input v-model="formModel.historyOfTreatment" placeholder="请输入现病治疗情况" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="既往史" prop="pastHistory" label-width="120px">
                <el-input v-model="formModel.pastHistory" placeholder="请输入既往史" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="过敏史" prop="allergies" label-width="120px">
                <el-input v-model="formModel.allergies" placeholder="请输入过敏史" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="体格检查" prop="healthCheckup" label-width="120px">
                <el-input v-model="formModel.healthCheckup" placeholder="请输入体格检查" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </div>
        <div>
          <p style="color: blue;background:rgba(167,255,255,0.5);border: 1px solid #00afff;padding: 10px;width: 100px;border-radius:5px;margin-bottom: 0px">评估诊断:</p>
          <el-card class="box-card" style="width: 1000px;">
            <el-button style="float: right; padding: 3px 0" type="text" @click="showDise">添加诊断</el-button>
            <p style="text-align: center">
              <span style="margin-left: 120px">ICD编码</span>
              <span style="margin: 0px 260px 0px 240px;">名称</span>
              <span>编码</span>
            </p>
            <hr>
            <el-table :data="diseInfo" :show-header="false">
              <el-table-column label="" align="center" class-name="small-padding fixed-width" width="80px">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="diseDelete(scope.$index,diseInfo)"
                  >删除</el-button>
                </template>
              </el-table-column>
              <el-table-column label="" align="center" prop="icd" v-model="diseLists.icd"/>
              <el-table-column label="" align="center" prop="name" v-model="diseLists.name"/>
              <el-table-column label="" align="center" prop="code" v-model="diseLists.code"/>
            </el-table>
          </el-card>
        </div>
      </el-main>
    </el-container>


    <!-- 添加病例目录模版管理 -->
    <el-dialog :title="title" :visible.sync="open" width="350px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="范围" v-show="showScope">
          <el-select v-model="form.scope" placeholder="请选择范围">
            <el-option
              v-for="dict in scopeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入目录/模板名称" style="width: 200px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--添加诊断病历-->
    <el-dialog :title="title" :visible.sync="openType" width="800px" append-to-body>
      <el-form :model="queryParamsDise" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="搜索诊断" prop="name">
          <el-input v-model="queryParamsDise.name" placeholder="诊断搜索"/>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="diseLists" @row-click="openDise">
        <el-table-column label="id" align="center" prop="id" v-show="id=false"/>
        <el-table-column label="ICD编码" align="center" prop="icd" />
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="编码" align="center" prop="code" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParamsDise.pageNum"
        :limit.sync="queryParamsDise.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { listCase_model_catalog, delCase_model_catalog, addCase_model_catalog} from "@/api/dms/case_model_catalog";
import { getCase_model, addCase_model, updateCase_model } from "@/api/dms/case_model";
import { getDiseByIds, listDise } from "@/api/dms/dise";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Case_model_catalog",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 病历模板的新增按钮显示隐藏
      showSearch: false,
      // 范围的显示隐藏
      showScope:false,
      // 病例模版管理表格数据
      case_model_catalogList: undefined,
      // 病历目录弹出层标题
      title: "",
      // 是否显示病历目录弹出层
      open: false,
      // 类型字典
      typeOptions: [],
      // 范围:0个人 1科室 2全院字典
      scopeOptions: [],
      // 查询参数
      queryParams: {
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      /** ----模板---*/
      openModel:false,
      // 表单参数
      formModel: {},
      // 表单校验
      rulesModel: {
      },
      /** -------诊断疾病------*/
      //已有的诊断疾病
      diseInfo:[],
      // 疾病列表显示隐藏
      openType: false,
      //  所有诊断疾病
      diseLists:[],
      // 诊断疾病查询参数
      queryParamsDise: {
        pageNum: 1,
        pageSize: 10,
        name: null,
      },
      // 总条数
      total: 0,
      // 表单校验
      rules: {
        name: [
          { required: true, message: "结算类别不能为空", trigger: "blur" }
        ],
        code: [
          { required: true, message: "代码不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getTreeselect();
    this.getDicts("dms_model_type").then(response => {
      this.typeOptions = response.data;
    });
    this.getDicts("dms_model_scoe").then(response => {
      this.scopeOptions = response.data;
    });
  },
  methods: {
	/** 查询目录下拉树结构 */
    getTreeselect() {
      listCase_model_catalog().then(response => {
        this.case_model_catalogList = response.data;
      });
    },
    // 编辑目录
    edit(){
      this.showSearch = true;
    },
    /** 新增按钮操作 */
    handleAdd(node) {
      this.reset();
      this.showScope = false;
      this.form.parentId = node.data.id;//目录id
      this.open = true;
      this.title = "新增模板/目录";
    },
    // 类型下拉框change事件
    typeChange(event){
      if(event == 1){
        this.showScope = false;
      }else{
        this.showScope = true;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 模板/目录提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addCase_model_catalog(this.form).then(response => {
            if (response.code === 200) {
              this.openModel = false;
              if(this.form.type == 2){
                this.resetModel();
                this.queryModelCatalog(response.data);
                this.openModel =  true;
              }
              this.msgSuccess("新增成功");
              this.open = false;
              this.getTreeselect();
            }
          });
        }
      });
    },
    // 模板/目录 表单重置
    reset() {
      this.form = {
        id: null,
        parentId: null,
        level: null,
        type: null,
        status: 0,
        modelId: null,
        scope: null,
        ownId: null,
        createTime: null,
        name: null
      };
      this.resetForm("form");
    },
    // 表单重置
    resetModel() {
      this.formModel = {
        id: null,
        chiefComplaint: null,
        historyOfPresentIllness: null,
        historyOfTreatment: null,
        pastHistory: null,
        allergies: null,
        healthCheckup: null,
        priliminaryDiseIdList: null,
        priliminaryDiseStrList: null,
        name: null,
        status: 0
      };
      this.resetForm("formModel");
    },
    // 目录节点点击事件
    queryModel(value){
      this.resetModel();
      this.openModel = false;
      if(value.typeId == 2){//模板才能进来
        this.openModel = true;
        this.queryModelCatalog(value.modelId);
      }
    },
    /** 查询模板和其诊断疾病 */
    queryModelCatalog(modelId){
      getCase_model(modelId).then(response => {//查询模板
        this.formModel = response.data;
        if(this.formModel.priliminaryDiseIdList != null && this.formModel.priliminaryDiseIdList != ""){
          getDiseByIds(this.formModel.priliminaryDiseIdList).then(response => {//查询诊断疾病
            this.diseInfo = response.data;
          });
        }
      });
    },
    /** -------------------模板---------------------*/
    // 修改模板按钮的提交事件
    updateModel(){
      // this.formModel.priliminaryDiseStrList = "";
      for(let i = 0;i<this.diseInfo.length;i++){
        this.formModel.priliminaryDiseIdList += this.diseInfo[i].id;
        this.formModel.priliminaryDiseStrList += this.diseInfo[i].name;
        if(i != this.diseInfo.length-1){
          this.formModel.priliminaryDiseIdList += ",";
          this.formModel.priliminaryDiseStrList += ",";
        }
      }
      updateCase_model(this.formModel).then(response =>{
        if(response.code == 200){
          this.$message('修改成功！');
          this.getTreeselect();
        }else{
          this.$message.error('修改失败！');
        }
      });
    },
    /** ------------------疾病---------------------*/
    /** 查询诊断疾病列表 */
    getList() {
      listDise(this.queryParamsDise).then(response => {
        this.diseLists = response.rows;
        this.total = response.total;
      });
    },
    // 移除该行诊断疾病
    diseDelete(index,rows){
      rows.splice(index,1);
    },
    // 添加诊断按钮操作
    showDise(){
      this.title = "诊断目录";
      this.openType = true;
      this.getList();
    },
    // 搜索诊断疾病
    handleQuery(){
      this.queryParamsDise.pageNum = 1;
      this.getList();
    },
    // table行点击事件
    openDise(row){
      for(let i = 0; i<this.diseInfo.length;i++){
        if(this.diseInfo[i].id == row.id){
          this.$message({
            message: '该诊断疾病已存在！',
            type: 'warning'
          });
          return true;
        }
      }
      this.diseInfo.push(row);
    },

    /** 删除按钮操作 最后做：先要删除模块，最后删除模板目录*/
    handleDelete(row) {
      this.$confirm('是否确认删除病例模版管理编号为"' + row.data.label + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        return delCase_model_catalog(row.data.id);
        }).then(() => {
          this.getTreeselect();
          this.openModel = false;
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
  }
};
</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
